<template>
  <div class="product-list">
    <!-- 头部 -->
    <div class="filter">
      <el-form
        ref="filterForm"
        :model="filterForm"
        label-width="90px"
        label-position="left"
        size="small"
      >
        <div class="flexRBC">
          <el-form-item
            label="商品名称："
            prop="name"
            size="small"
            style="marginbottom: 0"
          >
            <el-input v-model="filterForm.name" placeholder="请输入商品名称" />
            <el-button
              v-if="!filterCollapseActive"
              type="primary"
              round
              @keyup.enter.native="searchByKeyword"
              @click="searchByKeyword"
            >查 询</el-button>
          </el-form-item>
        </div>
        <!-- 筛选 -->
        <div class="app-main-filter-collapse-box">
          <el-collapse @change="filterCollapseChange">
            <el-collapse-item ref="filterCollapse" title="按条件筛选" name="1">
              <el-form-item
                v-if="activeName != 'second'"
                label="所属分类："
                prop="classifyId"
              >
                <el-select
                  v-model="filterForm.classifyId"
                  filterable
                  placeholder="请选择"
                >
                  <el-option label="全部分类" value="all" />
                  <el-option
                    v-for="v in classifyOptions"
                    :key="v.id"
                    :label="v.name"
                    :value="v.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="商品状态：" prop="status">
                <el-select
                  v-model="filterForm.status"
                  filterable
                  placeholder="请选择"
                >
                  <el-option label="全部状态" value="all" />
                  <el-option
                    v-for="(v, k) in statusOptions"
                    :key="k"
                    :label="v"
                    :value="k"
                  />
                </el-select>
              </el-form-item>
              <el-form-item class="filter-btn">
                <el-button
                  type="primary"
                  round
                  @click="searchByKeyword"
                >查 询</el-button>
                <el-button
                  round
                  @click="resetForm('filterForm')"
                >重 置</el-button>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-form>
    </div>

    <div class="content">
      <el-tabs v-model="activeName" class="tabs" @tab-click="searchByKeyword">
        <el-tab-pane label="主商品" name="first">
          <info-bar
            v-show="activeName == 'first'"
            ref="infoBar"
            :form-par="filterForm"
          />
        </el-tab-pane>
        <el-tab-pane label="赠送商品" name="second">
          <FreeGoods
            v-show="activeName == 'second'"
            ref="freeGoods"
            :form-par="filterForm"
          />
        </el-tab-pane>
      </el-tabs>
      <el-button
        v-if="!$store.getters.banBtnList.includes('BTN_WCANYIN_GOODS_ADD')"
        type="primary"
        size="small"
        class="add_product"
        round
        @click="openProductAdd"
      >新增菜品</el-button>
      <div class="border" />
      <!-- <div class="content_border"></div> -->
    </div>

    <!--彈框 -->
    <DialogEditGoods ref="editGoods" />
    <DialogEditFree ref="addFree" />
  </div>
</template>

<script>
import DialogEditGoods from './components/DialogEditGoods'
import DialogEditFree from './components/DialogEditFree'
import InfoBar from './InfoBar'
import FreeGoods from './FreeGoods'

import {
  getGoodsList,
  updateGoodsStatus,
  getClassifyList
} from '@/views/wcyModule/api/product'

export default {
  components: {
    DialogEditGoods,
    InfoBar,
    FreeGoods,
    DialogEditFree
  },
  props: ['shopId'],
  data() {
    return {
      // 配置
      classifyOptions: [],
      filterCollapseActive: false,
      // 筛选数据
      filterForm: {
        name: '',
        classifyId: 'all',
        status: 'all',
        shopId: this.shopId
      },
      statusOptions: {
        // 0: "已下架",
        1: '出售中',
        // 2: "已删除",
        3: '已售罄'
      },
      activeName: 'first',
      showdialogFree: false
    }
  },
  watch: {
    shopId(val) {
      this.activeName = 'first'
      this.filterForm.shopId = val
      this.resetForm('filterForm')
    }
  },
  mounted() {
    this.searchByKeyword()
    this.getClassifyOptions()
  },
  methods: {
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.searchByKeyword()
    },
    // 点击搜索
    searchByKeyword() {
      const { activeName, filterCollapseActive } = this
      this.filterForm.filterCollapseActive = filterCollapseActive
      activeName == 'first'
        ? this.$refs.infoBar.searchData()
        : this.$refs.freeGoods.searchData()
    },
    // 点击新增
    openProductAdd() {
      if (this.activeName == 'second') {
        this.$refs.addFree.open('add', this.shopId).then((res) => {
          this.$refs.freeGoods.searchData()
        })
      } else {
        this.$refs.editGoods.open('add', this.shopId).then((res) => {
          this.$refs.infoBar.searchData()
        })
      }
    },
    // 获取所有分类
    getClassifyOptions() {
      const params = {}
      params.shopId = this.shopId
      params.pageNum = 1
      params.pageSize = 999
      getClassifyList(params)
        .then((res) => {
          this.classifyOptions = res.data.row
        })
        .catch((err) => {})
        .finally(() => {})
    },

    /**
     * 状态组
     */
    // 筛选
    filterCollapseChange(val) {
      if (val.length === 0) {
        this.filterCollapseActive = false
      } else {
        this.resetForm('filterForm')
        this.filterCollapseActive = true
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.product-list {
  .el-input {
    width: 300px;
    margin-right: 10px;
  }
  // 单选换行
  .el-radio + .el-radio {
    margin-left: 0;
  }
  .el-radio {
    margin-right: 10px;
    line-height: 32px;
  }
  .el-select {
    width: 300px;
  }

  /* 表格 */
  .content {
    margin-top: 10px;
    position: relative;
    .tabs {
      // padding-top:10px ;
    }
    /deep/ .el-tabs__header {
      z-index: 11;
      margin-bottom: 10px;
      // border-top: 10px solid #ededed;
    }
    /deep/.el-tabs__content {
      margin-top: 40px;
    }
    .add_product {
      position: absolute;
      right: 0;
      top: 16px;
      z-index: 11;
    }
    // .border {
    //   position: absolute;
    //   width: calc(100% + 60px);
    //   height: 65px;
    //   top: 0px;
    //   left: -30px;
    //   z-index: 1;
    //   border: 10px solid #ededed;
    // }
    .content_border {
      position: absolute;
      width: calc(100% + 60px);
      height: calc(100%);
      top: 75px;
      left: -30px;
      // z-index: 1;
      border: 10px solid #ededed;
      border-width: 10px 15px;
    }
  }
}
</style>
